<template>
    <div class="screen">
        <div v-for="(item, index) in ports" :key="index" class="port">
            <div class="port-head">
                <div class="port-head-img">
                    <img :src="headImg" alt="" width="60" height="50">
                </div>
                <div class="port-head-content">
                    <div>请取餐···</div>
                    <div>Serving...</div>
                </div>
            </div>
            <div class="port-dec">
                请在<span>{{index + 1}}号</span>取餐口扫码取餐
            </div>
            <div class="port-calling">
                {{item.calling || '-----'}}
            </div>
            <div class="prot-waitdec">
                <div class="prot-waitdec-img">
                    <img :src="leftImg" alt="" width="200">
                </div>
                <div>
                    制作中
                </div>
                <div class="prot-waitdec-img">
                    <img :src="rightImg" alt="" width="200">
                </div>
            </div>
            <ul class="port-waiting">
                <li v-for="(val, i) in item.waiting" :key="i">
                    {{val}}
                </li>
            </ul>
            <div class="prot-waitdec">
                <div class="prot-waitdec-img">
                    <img :src="leftImg" alt="" width="200">
                </div>
                <div @click="call">
                    取餐超时
                </div>
                <div class="prot-waitdec-img">
                    <img :src="rightImg" alt="" width="200">
                </div>
            </div>
            <ul class="port-overtime">
                <li v-for="(val, i) in item.overtime" :key="i">
                    {{val}}
                </li>
            </ul>
            
        </div>
        <!-- <el-button @click="call">call</el-button> -->
    </div>
</template>

<script>
import headImg from "@/assets/images/head.png";
import leftImg from "@/assets/images/left-line.png";
import rightImg from "@/assets/images/right-line.png";
window.getData = function(res) {
    let myEvent = new CustomEvent("getData", {
        detail: { res: res }
    });
    window.dispatchEvent(myEvent);
};

export default {
    data() {
        return {
            ports: [
                {
                    calling: '',
                    waiting: [],
                    overtime: [],
                },
                {
                    calling: '',
                    waiting: [],
                    overtime: [],
                }
            ],
            callTimer: null,
            headImg,
            leftImg,
            rightImg
        }
    },
    mounted() {
        window.addEventListener("getData", event => {
            let res = JSON.parse(event.detail.res);
            if (!res.topic.includes("claypot_instruction_")) return;
            if (!res.data.data) {
                res.data.data = {
                    waiting: [],
                    calling: [],
                    overtimeCall: []
                };
            }
            this.getData(res.data.data);
        });
    },
    methods: {
        getData(res) {
            let { waiting = [], overtimeCall = [], calling = [] } = res;
            let port1Calling = '', port2Calling = '';
            calling.forEach(item => {
                if(item.number == 1){
                    port1Calling = item.mealId
                }else if(item.number == 2){
                    port2Calling = item.mealId
                }
            })

            let port1Waiting = [], port2Waiting = [];
            waiting.forEach(item => {
                if(item.number == 1){
                    port1Waiting.push(item.mealId)
                }else if(item.number == 2){
                    port2Waiting.push(item.mealId)
                }
            })

            let port1Overtime = [], port2Overtime = [];
            overtimeCall.forEach(item => {
                if(item.number == 1){
                    port1Overtime.push(item.mealId)
                }else if(item.number == 2){
                    port2Overtime.push(item.mealId)
                }
            })

            this.ports[0].calling = port1Calling;
            this.ports[1].calling = port2Calling;
            this.ports[0].waiting = port1Waiting;
            this.ports[1].waiting = port2Waiting;
            this.ports[0].overtime = port1Overtime;
            this.ports[1].overtime = port2Overtime;
            
            let str = "";
            if (port1Calling) str += "请," + port1Calling + "到1号取餐口取餐。";
            if (port2Calling) str += "请," + port2Calling + "到2号取餐口取餐。";
            // str = '你好'
            // this.$message.success(str);
            if (window.androidObj) {
                clearInterval(this.callTimer);
                window.androidObj.callSpeeck(str);
                this.callTimer = setInterval(() => {
                    window.androidObj.callSpeeck(str);
                }, 15000);
            }
            
        },
        call() {
            this.getData({
                waiting: [
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 2,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 2,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0158",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0108",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0106",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0107",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0118",
                        qty: 3
                    }
                ],
                calling: [
                    {
                        number: 1,
                        mealId: "B0102",
                        detailId: "1205674969532854292",
                        qty: 3
                    },
                    {
                        number: 2,
                        mealId: "A0206",
                        detailId: "1205674969532854292",
                        qty: 3
                    }
                ],
                overtimeCall: [
                    {
                        number: 1,
                        mealId: "A0401",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },
                    {
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A0402",
                        qty: 3
                    },
                ],
                deviceId: 1204291689871810562
            });
        }
    }
};
</script>

<style lang="less" scoped>
.screen{
    color: #fff;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    height: 100%;
    
    .port{
        padding: 15px;
        height: 100%;
        box-sizing: border-box;
        width: 50%;
        display: flex;
        flex-direction: column;
        &:first-child{
            border-right: 2px dashed #fff;
        }
        .port-head{
            display: flex;
            align-items: center;
            height: 75px;
            background: #E3007E;
            .port-head-img{
                height: 75px;
                width: 100px;
                background: rgba(0, 0, 0, 0.1);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .port-head-content{
                width: 100%;
                margin: 0 20px;
                display: flex;
                justify-content: space-between;
                font-size: 32px;
            }
            /* &>div{
                hei
            } */
        }
        .port-dec{
            text-align: center;
            font-size: 30px;
            padding: 20px 0;
            span{
                color: #E3007E;
            }
        }
        .port-calling{
            font-size: 100px;
            text-align: center;
            /* padding-bottom: 20px; */
            color: #E3007E;
        }
        .prot-waitdec{
            display: flex;
            font-size: 28px;
            color: #ccc;
            align-items: center;
            justify-content: space-around;
            .prot-waitdec-img{
                img{
                    margin-bottom: 10px;
                }
            }
        }
        .port-waiting{
            color: #ccc;
            font-size: 40px;
            margin-top: 15px;
            flex: 1;
            overflow: hidden;
            &>li{
                display: inline-block;
                height: 60px;
                line-height: 60px;
                text-align: center;
                width: 25%;
            }
        }
        .port-overtime{
            color: #ccc;
            font-size: 40px;
            margin-top: 15px;
            height: 110px;
            overflow: hidden;
            &>li{
                display: inline-block;
                height: 60px;
                line-height: 60px;
                text-align: center;
                width: 25%;
            }
        }
    }
}
</style>